@import './lib/reset.scss';

.uesr-header{
	@include background-color(#f66b6b);
	@include rect(100%, 1.7rem);
	border-bottom:1px solid #ddd;
	.avatar{
		@include rect(100%, 1.1rem);
		@include flexbox();
		@include justify-content(space-between);
		@include align-items();
		.user-avatar{
			span img{
				@include rect(0.6rem, 0.6rem);
				border-radius:50%;
				border:3px solid #fff;
				@include margin(0 0.2rem);
			}
			a, b{
				line-height:0.6rem;
				@include text-color(#fff);
				@include font-size(0.18rem);
			}
		}
		.user-login{
			@include flexbox();
			.username{
				p{
					@include text-color(#fff);
					@include font-size(0.18rem);
					line-height:0.3rem;
				}
			}
		}
		.shezhi{
			@include rect(0.6rem, 0.4rem);
			background:rgba(0,0,0,0.3);
			@include text-align();
			@include line-height(0.4rem);
			border-radius:0.2rem 0 0 0.2rem;
			.iconfont{
				@include font-size(0.25rem);
				@include text-color(#fff);
			}
		}
	}
	.user-nav{
		@include rect(100%, 0.6rem);
		@include flexbox();
		@include justify-content(space-around);
		@include align-items();
		li a{
			@include font-size(0.14rem);
			@include text-color(#fff);
			@include display(block);
			@include text-align();
		}
	}
}
.my-order{
	@include rect(100%, 1.1rem);
	@include background-color(#fff);
	@include margin(0.1rem 0);
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	.order-list{
		border-bottom:1px solid #efefef;
		a{
			@include rect(100%, 0.4rem);
			@include display(block);
			@include flexbox();
			@include justify-content(space-between);
			@include align-items();
			@include padding(0 0.15rem);
			@include font-size(0.14rem);
			@include text-color(#333);
		}
	}
	.order-detail{
		ul{
			@include rect(100%, 0.7rem);
			@include flexbox();
			@include justify-content(space-around);
			li{
				@include font-size(0.14rem);
				@include text-color(#333);
				@include flexbox();
				@include flex-direction(column);
				@include text-align();
				@include justify-content();
				.iconfont{
					@include font-size(0.2rem);
					@include text-color(#f84646);
				}
			}
		}
	}
}
.personal{
	@include rect(100%, 2rem);
	@include background-color(#fff);
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	ul{
		@include flexbox();
		@include flex-wrap(wrap);
		li{
			@include rect(25%, 1rem);
			@include flexbox();
			@include flex-direction(column);
			@include text-align();
			@include justify-content();
			border-right:1px solid #efefef;
			border-bottom:1px solid #efefef;
			.iconfont{
				@include font-size(0.26rem);
				@include text-color(#f66b6b);
			}
			p{
				@include font-size(0.14rem);
				@include text-color(#333);
			}
		}
	}
	
}





















